<template>
  <div>
      <Row class="bench_search4">
        <Col span="5">
          <span>事件名称：</span>
          <Input style="width: 150px;" v-model="event" />
        </Col>
        <Col span="6">
          <span>发生事件类型：</span>
          <Select style="width:150px" @on-change="happenChange">
              <Option value="0">全部</Option>
              <Option value="1">邻里纠纷</Option>
              <Option value="2">民生</Option>
              <Option value="3">疫情</Option>
              <Option value="4">事件</Option>
              <Option value="5">其他</Option>
          </Select>
        </Col>
        <Col span="5">
          <span>发生时间：</span>
          <DatePicker v-model="coDate" type="datetime" placeholder="Select date" style="width: 150px"></DatePicker>
        </Col>
        <Col span="6">
          <span>事件发生人姓名：</span>
          <Input style="width: 150px;" v-model="event_name" />
        </Col>
      </Row>
      <Row class="bench_search4">
        <Col span="6">
          <span>事件发生地点：</span>
          <Input style="width: 150px;" v-model="event_address" />
        </Col>
        <Col span="5">
          <span>登记人姓名：</span>
          <Input style="width: 150px;" v-model="recode_name" />
        </Col>
        <Col span="5">
          <span>事件状态：</span>
          <Select style="width:150px" @on-change="selectChange">
              <Option value="0">全部</Option>
              <Option value="1">待解决</Option>
              <Option value="2">处理中</Option>
              <Option value="3">已解决</Option>
          </Select>
        </Col>
        <!-- <Button class="colBtn" size="large" type="primary" @click="drawerShow = true">新增</Button> -->
        <Button class="colBtn" size="large" type="primary" @click="onCompanyList">查看</Button>
        <Button class="colBtn" size="large" type="primary" @click="ProcessedBtn">已解决</Button>
      </Row>
      <Table style="margin-top: 20px;" border :columns="columns1" :data="eventList"></Table>
      <div style="text-align: center; margin-top: 30px">
        <Page :total="totalnum" :current="currentPageNo" :page-size="currentPageSize" class="page_style" show-total  show-sizer @on-change="pageChange" @on-page-size-change="pageSize" />
      </div>

      <Drawer
          title="新增"
          v-model="drawerShow"
          width="720"
          :mask-closable="false"
          :styles="styles"
        >
          <Form :model="formData">
              <Row :gutter="32">
                  <Col span="8">
                      <FormItem label="事件发生人" label-position="top">
                          <Input v-model="formData.event_name" placeholder="必填项" />
                      </FormItem>
                  </Col>
                  <Col span="8">
                      <FormItem label="事件描述" label-position="top">
                          <Input v-model="formData.event_type" placeholder="必填项" />
                      </FormItem>
                  </Col>
                  <Col span="8">
                      <FormItem label="发生事件类型" label-position="top">
                          <Select @on-change="happenChange1">
                              <Option value="1">邻里纠纷</Option>
                              <Option value="2">民生</Option>
                              <Option value="3">疫情</Option>
                              <Option value="4">事件</Option>
                              <Option value="5">其他</Option>
                          </Select>
                      </FormItem>
                  </Col>
              </Row>
              <Row :gutter="32">
                  <Col span="8">
                      <FormItem label="事发地" label-position="top">
                          <Input v-model="formData.event_address" placeholder="必填项" />
                      </FormItem>
                  </Col>
                  <Col span="8">
                      <FormItem label="汇报人" label-position="top">
                          <Input v-model="formData.recode_name" placeholder="必填项" />
                      </FormItem>
                  </Col>
                  <Col span="8">
                      <FormItem label="汇报人身份证号" label-position="top">
                          <Input v-model="formData.recode_id_card" placeholder="必填项" />
                      </FormItem>
                  </Col>
              </Row>
              <Row :gutter="32">
                <Col span="8">
                      <FormItem label="汇报人联系方式" label-position="top">
                          <Input v-model="formData.recode_phone" placeholder="必填项" />
                      </FormItem>
                  </Col>
                  <Col span="8">
                      <FormItem label="事发时间" label-position="top">
                          <DatePicker v-model="formData.happen_time" type="datetime" placeholder="必填项" style="width: 200px"></DatePicker>
                      </FormItem>
                  </Col>
                  <Col span="8">
                      <FormItem label="事务处理进度" label-position="top">
                          <Input v-model="formData.event_percent" @on-change="percentChange" placeholder="请输入0-100数字" />
                      </FormItem>
                  </Col>
              </Row>

              <Row :gutter="32" v-if="endPerson">
                  <Col span="8">
                      <FormItem label="办理人" label-position="top">
                        <Input v-model="formData.end_person" placeholder="必填项" />
                      </FormItem>
                  </Col>
                  <Col span="8">
                      <FormItem label="批注" label-position="top">
                         <Input v-model="formData.end_desc" placeholder="必填项" />
                      </FormItem>
                  </Col>
              </Row>

              <Row :gutter="32">
                  <Col span="8">
                      <FormItem label="解决方式" label-position="top">
                        <Input v-model="formData.solution_type" placeholder="必填项" />
                      </FormItem>
                  </Col>
                  <Col span="8">
                      <FormItem label="解决时间" label-position="top">
                          <DatePicker v-model="formData.solution_time" type="datetime" placeholder="必填项" style="width: 200px"></DatePicker>
                      </FormItem>
                  </Col>
              </Row>

          </Form>
          <div class="demo-drawer-footer">
              <Button style="margin-right: 8px" @click="drawerShow = false">关闭</Button>
              <Button type="primary" @click="addEvent">提交</Button>
          </div>
      </Drawer>
      <Drawer
          title="编辑"
          v-model="editShow"
          width="720"
          :mask-closable="false"
          :styles="styles"
      >
      <Form :model="editData">
        <Row :gutter="32">
            <Col span="8">
                <FormItem label="事件发生人" label-position="top">
                    <Input v-model="editData.event_name" placeholder="必填项" />
                </FormItem>
            </Col>
            <Col span="8">
                <FormItem label="事件描述" label-position="top">
                    <Input v-model="editData.event_type" placeholder="必填项" />
                </FormItem>
            </Col>
            <Col span="8">
                <FormItem label="发生事件类型" label-position="top">
                    <Select @on-change="happenChange1" :value="editData.event_type_dict">
                        <Option value="1">邻里纠纷</Option>
                        <Option value="2">民生</Option>
                        <Option value="3">疫情</Option>
                        <Option value="2">事件</Option>
                        <Option value="3">其他</Option>
                    </Select>
                </FormItem>
            </Col>
        </Row>
        <Row :gutter="32">
          <Col span="8">
                <FormItem label="事发地" label-position="top">
                    <Input v-model="editData.event_address" placeholder="必填项" />
                </FormItem>
            </Col>
            <Col span="8">
                <FormItem label="汇报人" label-position="top">
                    <Input v-model="editData.recode_name" placeholder="必填项" />
                </FormItem>
            </Col>
            <Col span="8">
                <FormItem label="汇报人身份证号" label-position="top">
                    <Input v-model="editData.recode_id_card" placeholder="必填项" />
                </FormItem>
            </Col>
        </Row>
        <Row :gutter="32">
          <Col span="8">
                <FormItem label="汇报人联系方式" label-position="top">
                    <Input v-model="editData.recode_phone" placeholder="必填项" />
                </FormItem>
            </Col>
            <Col span="8">
                <FormItem label="事发时间" label-position="top">
                    <DatePicker v-model="editData.happen_time" type="datetime" placeholder="必填项" style="width: 200px"></DatePicker>
                </FormItem>
            </Col>
            <Col span="8">
                <FormItem label="事务处理进度" label-position="top">
                    <Input v-model="editData.event_percent" @on-change="percentChange1" placeholder="请输入0-100数字" />
                </FormItem>
            </Col>
        </Row>
        <Row :gutter="32" v-if="endPerson">
            <Col span="8">
                <FormItem label="办理人" label-position="top">
                  <Input v-model="editData.end_person" placeholder="必填项" />
                </FormItem>
            </Col>
            <Col span="8">
                <FormItem label="批注" label-position="top">
                    <Input v-model="editData.end_desc" placeholder="必填项" />
                </FormItem>
            </Col>
        </Row>
        <Row :gutter="32">
            <Col span="8">
                <FormItem label="解决方式" label-position="top">
                  <Input v-model="editData.solution_type" placeholder="必填项" />
                </FormItem>
            </Col>
            <Col span="8">
                <FormItem label="解决时间" label-position="top">
                    <DatePicker v-model="editData.solution_time" type="datetime" placeholder="必填项" style="width: 200px"></DatePicker>
                </FormItem>
            </Col>
        </Row>
      </Form>
      <div class="demo-drawer-footer">
        <Button style="margin-right: 8px" @click="editShow = false">关闭</Button>
        <!-- <Button type="primary" @click="addEdit">编辑</Button> -->
      </div>
    </Drawer>
   </div>
</template>

<script>
import { companyEventList, addCompanyEvent, updateCompanyEvent, updateDelCompanyEvent } from '@/api/qstbV2'
// import echartsFx from './components/echartsFx.vue'
// import echartsBh from './components/echartsBh.vue'
// import echartsQk from './components/echartsQk.vue'
// import echartsTb from './components/echartsTb.vue'
export default {
  components: {
    // echartsFx,
    // echartsBh,
    // echartsQk,
    // echartsTb
  },
  data () {
    return {
      theme2: 'light',
      event: '',
      event_name: '',
      event_address: '',
      recode_name: '',
      event_state: '',
      event_type_dict: '',
      currentPageNo: 1,
      currentPageSize: 10,
      totalnum: 0,
      drawerShow: false,
      editShow: false,
      endPerson: false,
      styles: {
        height: 'calc(100% - 55px)',
        overflow: 'auto',
        paddingBottom: '53px',
        position: 'static'
      },
      formData: {
      },
      editData: {},
      coDate: '',
      ckDeta: '',
      columns1: [
        // { title: '序号',
        //   // key: 'id',
        //   width: 70,
        //   align: 'center',
        //   render: (h, params) => {
        //     return h('div', {
        //     }, h)
        //   }
        // },
        {
          title: '操作',
          key: 'action',
          width: 180,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.show(params.row)
                  }
                }
              }, '编辑')
              // h('Button', {
              //   props: {
              //     type: 'error',
              //     size: 'small'
              //   },
              //   on: {
              //     click: () => {
              //       this.delBtn(params.row)
              //     }
              //   }
              // }, '删除')

            ])
          }
        },
        { title: '事件发生人姓名', key: 'event_name', width: 130, align: 'center' },
        { title: '事件发生地点', key: 'event_address', width: 150, align: 'center' },
        { title: '发生事件', key: 'event_type', width: 120, align: 'center' },
        { title: '发生事件类型',
          key: 'event_type_dict',
          width: 120,
          align: 'center',
          render: (h, params) => {
            return h('div', {
            }, params.row.event_type_dict === '1' ? '邻里纠纷' : params.row.event_type_dict === '2' ? '民生' : params.row.event_type_dict === '3' ? '疫情' : params.row.event_type_dict === '4' ? '事件' : params.row.event_type_dict === '5' ? '其他' : '')
          }
        },
        { title: '登记人姓名', key: 'recode_name', width: 120, align: 'center' },
        { title: '登记人身份证号', key: 'recode_id_card', width: 170, align: 'center' },
        { title: '登记人联系方式', key: 'recode_phone', width: 130, align: 'center' },
        { title: '事件状态',
          key: 'event_state',
          width: 120,
          align: 'center',
          render: (h, params) => {
            return h('div', {
            }, params.row.event_state === '1' ? '待处理' : (params.row.event_state === '2' ? '处理中' : '已处理'))
          }
        },
        { title: '解决方式', key: 'solution_type', width: 120, align: 'center' },
        { title: '发生时间',
          key: 'happen_time',
          width: 150,
          align: 'center',
          render: (h, params) => {
            return h('div', {
              attrs: {
                title: this.parseTime(params.row.happen_time, '{y}-{m}-{d}   {h}:{i}:{s}')
              }
            },
            this.parseTime(params.row.happen_time, '{y}-{m}-{d}   {h}:{i}:{s}')
            )
          }
        },
        { title: '解决时间',
          key: 'solution_time',
          width: 150,
          align: 'center',
          render: (h, params) => {
            return h('div', {
              attrs: {
                title: this.parseTime(params.row.solution_time, '{y}-{m}-{d}   {h}:{i}:{s}')
              }
            },
            this.parseTime(params.row.solution_time, '{y}-{m}-{d}   {h}:{i}:{s}')
            )
          }
        }
      ],
      eventList: []
    }
  },
  mounted () {
    this.companyList()
  },
  methods: {
    size (pageSize) {
      console.log(pageSize, '333')
    },
    selectChange (val) {
      this.formData.event_state = val
      if (val === '0') {
        this.event_state = ''
      } else {
        this.event_state = val
      }
    },
    happenChange (val) {
      if (val === '0') {
        this.event_type_dict = ''
      } else {
        this.event_type_dict = val
      }
    },
    happenChange1 (val) {
      this.formData.event_type_dict = val
      this.editData.event_type_dict = val
    },
    selectChangeEdit (val) {
      this.editData.event_state = val
    },
    parseTime (time, TimeFormat) {
      if (arguments.length === 0) {
        return null
      }
      const format = TimeFormat || '{y}-{m}-{d} {h}:{i}:{s}'
      let date
      if (typeof time === 'object') {
        date = time
      } else {
        if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
          time = parseInt(time)
        }
        if ((typeof time === 'number') && (time.toString().length === 10)) {
          time = time * 1000
        }
        date = new Date(time)
      }
      const formatObj = {
        y: date.getFullYear(),
        m: date.getMonth() + 1,
        d: date.getDate(),
        h: date.getHours(),
        i: date.getMinutes(),
        s: date.getSeconds(),
        a: date.getDay()
      }
      const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
        let value = formatObj[key]
        if (key === 'a') {
          return ['日', '一', '二', '三', '四', '五', '六'][value]
        }
        if (result.length > 0 && value < 10) {
          value = '0' + value
        }
        return value || 0
      })
      return time_str
    },
    show (val) {
      console.log(val)
      this.editShow = true
      this.editData = val
    },
    delBtn (val) {
      const data = {
        ids: [val.id]
      }
      updateDelCompanyEvent(data).then(ret => {
        this.$Message.info('删除成功')
        this.companyList()
      })
    },
    companyList () {
      if (this.coDate) {
        this.ckDeta = this.parseTime(this.coDate)
      } else {
        this.ckDeta = ''
      }

      const data = {
        event_type_dict: this.event_type_dict,
        pageNo: this.currentPageNo,
        pageSize: this.currentPageSize,
        event_type: this.event,
        event_name: this.event_name,
        event_address: this.event_address,
        happen_time: this.ckDeta,
        recode_name: this.recode_name,
        event_state: this.event_state,
        state: parseInt('1')
      }
      companyEventList(data).then(ret => {
        console.log(ret, 'shsshshshsh')
        this.totalnum = ret.data.data.totalRecord
        this.eventList = ret.data.data.results
      })
    },
    pageSize (value) {
      this.currentPageSize = value
      this.pageChange()
    },
    pageChange (value) {
      this.currentPageNo = value
      this.companyList()
    },
    percentChange () {
      // 事件进度
      if (this.formData.event_percent === '100') {
        this.endPerson = true
      } else {
        this.endPerson = false
      }
    },
    percentChange1 () {
      // 事件进度
      if (this.editData.event_percent === '100') {
        this.endPerson = true
      } else {
        this.endPerson = false
      }
    },
    onCompanyList () {
      this.companyList()
    },
    ProcessedBtn () {
      this.event_state = '3'
      this.companyList()
    },
    addEvent () {
      const data = {
        event_type_dict: this.formData.event_type_dict, // 发生事件类型
        end_person: this.formData.end_person, // 办理人
        end_desc: this.formData.end_desc, // 批注
        event_name: this.formData.event_name, // 事件发生人
        event_address: this.formData.event_address, // 事件发生地点
        event_type: this.formData.event_type, // 发生事件
        recode_name: this.formData.recode_name, // 登记人姓名
        recode_id_card: this.formData.recode_id_card, // 登记人身份证号
        recode_phone: this.formData.recode_phone, // 登记人联系方式
        event_percent: this.formData.event_percent, // 事件百分比
        event_state: this.formData.event_state, // 事件状态
        solution_type: this.solution_type, // 解决方式
        happen_time: this.parseTime(this.formData.happen_time), // 发生时间
        solution_time: this.formData.solution_time ? this.parseTime(this.formData.solution_time) : '', // 解决时间
        state: '1' // 数据状态
      }
      addCompanyEvent(data).then(ret => {
        // if (ret.data.errcode === 0') {
        //   this.$Message.info('This is a info tip')
        // }
        this.$Message.info('提交成功')
        this.drawerShow = false
        this.companyList()
        // this.formData = {}
      })
    },
    addEdit () {
      const data = {
        event_type_dict: this.editData.event_type_dict,
        event_name: this.editData.event_name, // 事件发生人
        event_address: this.editData.event_address, // 事件发生地点
        event_type: this.editData.event_type, // 发生事件
        recode_name: this.editData.recode_name, // 登记人姓名
        recode_id_card: this.editData.recode_id_card, // 登记人身份证号
        recode_phone: this.editData.recode_phone, // 登记人联系方式
        event_percent: parseInt(this.editData.event_percent), // 事件百分比
        event_state: this.editData.event_state, // 事件状态
        solution_type: this.editData.solution_type, // 解决方式
        happen_time: this.parseTime(this.editData.happen_time), // 发生时间
        solution_time: this.parseTime(this.editData.solution_time), // 解决时间
        state: '1', // 数据状态
        id: this.editData.id
      }
      console.log(data, 'kkkk')
      updateCompanyEvent(data).then(ret => {
        this.$Message.info('编辑成功')
        this.editShow = false
        this.companyList()
      })
    }
  }
}
</script>

<style scoped>
.bench_search4 {
    margin-bottom: 20px;
}
.ivu-col-offset-1 {
  margin-left: 0px;
}
.colBtn {
  margin-left: 10px;
  height: 32px;
  line-height: 16px;
}
::v-deep .ivu-col {
  margin-bottom: 10px;
}
.demo-drawer-footer{
        width: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        border-top: 1px solid #e8e8e8;
        padding: 10px 16px;
        text-align: right;
        background: #fff;
    }
</style>
